import { Route, Redirect } from "react-router-dom";
import { connect } from 'react-redux'
import { useEffect, useState } from 'react'
import { postUserLogin } from "../../assets/js/api";
import { changeLog, changeUserInfo } from "../../store/actions";
import { LoadingOutlined } from "@ant-design/icons";
import { message } from "antd";
import { getSocket } from "../../socketEvent";

function RouterGuard(props) {

    const { routerObj, location, changeLog, changeUserInfo } = props;
    const { pathname } = location;
    const { islogin } = props;

    const [loading, setLoading] = useState(true);



    const targetRouterConfig = routerObj.find(item => {
        const matchpath = item.matchpath ?? item.path;
        return pathname.match(new RegExp(`^${matchpath}`, 'g'))
    });

    useEffect(() => {
        setLoading(true);

        postUserLogin()
        .then(res => {
            if (res.data.code === 1) {
                // 先userInfo再改log状态,有关socket链接时的user_id
                changeUserInfo(res.data.data);
                changeLog(true);
                getSocket(res.data.data.id);
            }
        })
        .finally(() => {
            setLoading(false);
        });
    }, [changeUserInfo, changeLog]);
    useEffect(() => {
        if (!loading && !islogin && targetRouterConfig && targetRouterConfig.auth) {
            message.open({type: 'error', content: '请先登录'});
        }
    }, [loading, islogin, targetRouterConfig]);


    // 直接进入根路径则跳转home
    if (pathname === '/') {
        return <Redirect to={{pathname: '/home'}} />
    }


    function judgePath() {
        // 判断是否有params参数,有且当前路径没有params时,仅使用路径为path
        // 使进入组件,让组件自身判断。
        // matchpath可能不存在,故不使用解构获取
        let { path, needsparams } = targetRouterConfig
        if (needsparams && pathname === targetRouterConfig.matchpath) {
            path = targetRouterConfig.matchpath;
        }
        return path;
    }
    
    // if (targetRouterConfig) {
    //     if (!targetRouterConfig.auth) {
    //         // 路径存在,未登录可进入,未登录
    //         return <Route path={judgePath()} component={targetRouterConfig.component} />
    //     } else {
    //         if (islogin) {
    //             return <Route path={judgePath()} component={targetRouterConfig.component} />
    //         } else {
    //             // 未登录,进入的页面需要登录,跳转至home登录
    //             return (
    //                 loading ? 
    //                     <div style={{
    //                         width:'100%', 
    //                         height:'100%',
    //                         display:'flex',
    //                         justifyContent:'center',
    //                         alignItems:'center',
    //                         fontSize: '40px',
    //                         backgroundColor: 'rgba(0,0,0,.4)'
    //                     }}>
    //                         <LoadingOutlined />
    //                     </div> :
    //                     <Redirect to={{pathname: '/home', state: {log: true}}} />
    //             )
    //         }
    //     }
    // }
    // // 路径不存在 404
    // return <Redirect to={{pathname: '/404'}} />


// 先判断加载,是否登录,不然会提前跳转页面,导致redux数据不对
    return (
        loading ? 
            <div style={{
                width:'100%', 
                height:'100%',
                display:'flex',
                justifyContent:'center',
                alignItems:'center',
                fontSize: '40px',
                backgroundColor: 'rgba(0,0,0,.4)'
            }}>
                <LoadingOutlined />
            </div> :
            targetRouterConfig ? 
                !targetRouterConfig.auth ? 
                    <Route path={judgePath()} component={targetRouterConfig.component} /> : 
                    islogin ? 
                        <Route path={judgePath()} component={targetRouterConfig.component} /> : 
                    
                            <Redirect to={{pathname: '/home', state: {log: true}}} /> : 
                // 进入404有问题
                <Redirect to={{pathname: '/404'}} />
    )
}


function mapStatetoProps(state) {
    return {
        islogin: state.islogin
    }
}


export default connect(
    mapStatetoProps, 
    {
        changeLog, 
        changeUserInfo
    }
)(RouterGuard);